<nav-root></nav-root>
<breadcrumb-root [breadcrumb]='breadcrumb'></breadcrumb-root>
<div class="box" #divTarget>
    <div class="box2" [@fadeIn]>
        <div class="title">
            <span class="title1" style=" margin-right: 10px;">我创建的训练</span>
            <i class="anticon i1 anticon-plus-circle" (click)="addwindow=true"></i>
        </div>
        <Timeline-root *ngIf="load" (ondel)="del($event)" (onedit)="editform($event)" (onchange)="change($event)" [icon]="false" [train]="trainlist"></Timeline-root>
        <div class="title">
            <span class="title1">回收站</span>
            <span class="title2" style="margin-top: 7px;">“<span (click)="recoveryshow=!recoveryshow" style="  cursor: pointer;   text-decoration:underline;color:#333;">{{recoveryshow?'收起':'展开'}}</span>”所有删除的训练</span>
        </div>
        <recovery-root *ngIf="recoveryshow" [classguid]="FK_ClassGuid"></recovery-root>
    </div>
    <nz-back-top [nzTarget]="divTarget"></nz-back-top>
</div>

<mask-root *ngIf="addwindow||editwindow" [opacity]="'.7'" (onClick)="addwindow=false;editwindow=false;initialize();"></mask-root>
<div class="addwindow" *ngIf="addwindow||editwindow">
    <close-root (close)="addwindow=false;editwindow=false;initialize();"></close-root>
    <img src="./assets/img/{{img}}" class="add-img" alt="">
    <div class="add-name">{{canvasmsg.Name}}</div>
    <div class="add-englishname">{{canvasmsg.EnglishName}}</div>
    <div class="add-title">{{editwindow?'修改训练':'创建训练'}}</div>
    <div class="add-label">训练名称 <span>{{form.Title.length}}/20</span></div>
    <input maxlength="20" type="text" class="add-input" placeholder="训练名称" [(ngModel)]="form.Title">
    <div class="add-label">训练描述 <span>{{form.Description.length}}/20</span></div>
    <input maxlength="20" type="text" class="add-input" placeholder="训练描述" [(ngModel)]="form.Description">
    <div class="add-label">预约码 </div>
    <div style="display: flex; width: 100%;"><input onkeyup="this.value=this.value.replace(/[^\d]/g,'')" maxlength="5" onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " type="text" class="add-input" style="border-radius: 6px 0 0 6px;" placeholder="预约码" [(ngModel)]="form.Password">
        <div class="shuiji" (click)="shuiji()"><img src="./assets/img/code.png" alt=""></div>
    </div>
    <div class="add-label">选择花名册（或匿名模式）</div>
    <!-- <input (keyup)="checknum(20)" type="text" class="add-input" placeholder="选择花名册（或匿名模式）"> -->
    <div class="add-input" #input style="height: 41px;cursor: pointer;position: relative;display: flex;align-items: center;justify-content: space-between;" (click)="selectbox=!selectbox;">{{form.class}}
        <i class="anticon anticon-down" style="color: #666;font-size: 18px;"></i>
    </div>
    <div class="select-mask" *ngIf="selectbox" (click)="selectbox=false;"> </div>
    <div class="selectbox" [style.width.px]="input.offsetWidth" *ngIf="selectbox">
        <div class="select" *ngFor="let item of classlist" (click)="select(item)" [class.focus]="form.FK_ClassGuid==item.PK_ClassGuid">{{item.ClassName}}</div>
    </div>
    <!-- <nz-select style="width: 100%;" [(ngModel)]="form.FK_ClassGuid" nzPlaceHolder="匿名模式">
        <nz-option *ngFor="let item of classlist;let i=index" nzValue="{{item.PK_ClassGuid}}" nzLabel="{{item.ClassName}}"></nz-option>
    </nz-select> -->
    <button nz-button nzType="default" class="add-btn" *ngIf="editwindow" (click)="edit()">修 <span style="width:16px"></span> 改</button>
    <button nz-button nzType="default" class="add-btn" *ngIf="addwindow" (click)="addform()">创 <span style="width:16px"></span> 建</button>
</div>
